<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="套餐详情"></tui-navigation-bar>

    <section class="card modal-bg">
      <view class="card-title border-bottom">{{ $format(rechargeDetail, 'title', '暂无') }}</view>
      <view class="card-content">
        <my-row>
          <view slot="title">充值金额</view>
          <view slot="value" class="text-price">{{ $format(rechargeDetail, 'money', 0) }}</view>
        </my-row>
        <my-row>
          <view slot="title">赠送金额</view>
          <view slot="value" class="text-price">{{ $format(rechargeDetail, 'lessmoney', 0) }}</view>
        </my-row>
        <my-row>
          <view slot="title">赠送积分</view>
          <view slot="value" class="">{{ $format(rechargeDetail, 'score', 0) }}</view>
        </my-row>
        <my-row>
          <view slot="title">赠送套餐</view>
          <view slot="value" class="">{{ $format(rechargeDetail, 'mealname', '暂无') }}</view>
        </my-row>

        <my-row value="请选择房台号" @click.native="openSelectRoomListModal">
          <view slot="title">房台号</view>
          <view slot="value" class="is-flex items-center">
            <view>{{ selectRoom.roomid || '请选择房台号' }}</view>
            <my-icon name="arrow-right" size="12" color="#c0c7db" class="pl-10"></my-icon>
          </view>
        </my-row>

        <view class="card sub-card bg-deep-grey mt-10">
          <view class="sub-card-title text-center border-bottom">套餐明细</view>
          <view v-if="rechargeDetail" class="card-content meal-detail-content">
            <my-row v-for="(item, index) in rechargeDetail.couponid" :key="item">
              <view slot="title">{{ item }}</view>
              <view slot="value" class="primary-grey-text">x{{ rechargeDetail.couponnum[index] }}</view>
            </my-row>

            <my-row>
              <view slot="title">{{ $format(rechargeDetail, 'givecardname', '') }}</view>
            </my-row>

            <my-row>
              <view slot="title" class="mt-15">说明</view>
            </my-row>
            <view class="desc">{{ $format(rechargeDetail, 'content', '暂无说明') }}</view>
          </view>
          <view v-else class="card-content primary-grey-text">暂无套餐明细</view>
        </view>
      </view>

      <view class="pb-10 px-15 width-100" hover-class="hover-jump">
        <tui-button
          :size="30"
          type="gold"
          width="100%"
          height="80rpx"
          margin="10px 0"
          shape="round"
          :open-type="ifBindTelPhone ? '' : 'getPhoneNumber'"
          @tap="handleSubmitRecharge()"
          @getphonenumber="handleSubmitRecharge()"
        >
          确认充值
        </tui-button>
      </view>
    </section>

    <modal-select-room-list ref="selectRoomListModal" @select="modalSelectRoom"></modal-select-room-list>

    <!-- 选择房台号组件 -->
    <modal-scan ref="scanModal" showClose></modal-scan>

    <!-- 用户授权获取手机号码组件 -->
    <modal-get-user-phone ref="getUserPhoneModal"></modal-get-user-phone>
  </view>
</template>

<script>
import Utils from '@/utils/index'
export default {
  data() {
    return {
      // 充值卡基本信息 - 从上一个页面传递进来
      rechargeInfo: null,

      // 充值卡详细信息 - 通过 rechargeInfo.id 获取
      rechargeDetail: null,

      // 列表选中的房台信息
      selectRoom: null,

      // 用户是否绑定了手机号
      ifBindTelPhone: false
    }
  },

  computed: {
    loginInfo() {
      return this.$store.getters.loginInfo
    }
  },

  async onLoad(option) {
    const encodeOption = this.$encode(option)
    this.rechargeInfo = this.$format(encodeOption, 'data')
  },

  async onShow() {
    this.getRechargeCardDetail()

    try {
      this.ifBindTelPhone = await this.checkTelPhone()
      console.log('用户已绑定手机号')
    } catch (err) {
      this.ifBindTelPhone = false
      console.log('用户未绑定手机号')
    }
  },

  methods: {
    modalSelectRoom(room) {
      this.selectRoom = room
      this.closeSelectRoomListModal()
    },

    openSelectRoomListModal() {
      this.$refs.selectRoomListModal.open({ bid: this.$format(this.rechargeInfo, 'bid') })
    },

    closeSelectRoomListModal() {
      this.$refs.selectRoomListModal.close()
    },

    handleSubmitRecharge: Utils.debounce(async function (param) {
      try {
        const roomid = this.$format(this.selectRoom, 'roomid')
        // if (!roomid) return this.$msg('text', '请先选择房台号再确认充值')

        // 如果未绑定手机号，需要调起微信先做授权
        if (!this.ifBindTelPhone) {
          if (this.$isEmpty(param)) return
          await this.getUserPhone(param)
        }

        const baseParam = { ...this.rechargeInfo, roomid }
        // console.param('submitRecharge', baseParam)
        this.submitRecharge(baseParam)
      } catch (err) {
        console.err(err)
      }
    }),

    // 获取充值卡套餐明细
    getRechargeCardDetail() {
      const baseParam = this.getBase(['token', 'selectuniacid'])
      if (!baseParam) return

      Object.assign(baseParam, { rechargeid: this.rechargeInfo.id })
      console.param('获取充值卡套餐明细', baseParam)
      this.$api
        .getRechargeCardDetail(baseParam)
        .then(res => {
          console.res('获取充值卡套餐明细', res)
          this.rechargeDetail = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('获取充值卡套餐明细', err)
          this.errMsg(err, '获取充值卡套餐失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.page {
  padding: 15px;
  color: $color-primary-grey-text;
  .card {
    border-radius: 5px;

    ::v-deep .row {
      padding: 8px 0;
    }

    .card-title {
      padding: 15px;
      font-size: $font-size-lg;
      @include border-bottom;
    }
    .card-content {
      padding: 10px 15px;
    }

    .meal-detail-content {
      ::v-deep .row {
        padding: 0 0 8px 0;
      }
    }

    .sub-card {
      background-color: rgb(41, 47, 69);
      font-size: $font-size-xs;
      .sub-card-title {
        padding: 10px;
        @include border-bottom;
        border-bottom: 1px solid #1c2132;
      }
      .desc {
        padding: 2px 0;
        color: #6a78a3;
      }
    }
  }
}
</style>
